*{
    box-sizing: border-box;
    font-size: 14px;
    margin: 0;
    padding: 0;
}

.header{
    background-image: url(http://www.5sir.me/jqcase/img/1/header.jpg);
    background-position: center top;
    height: 212px;
}
.body{
    background-image: url(http://www.5sir.me/jqcase/img/1/body.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    height: 643px;
    width:1390px;
    margin: auto;
}
.brandbox{
    width:1390px;
    margin: auto;
    display: flex;
    border-top:1px solid #ddd;
}
.brandbox>.col1{
    width:110px;
    background-color: #f3f3f3;
    padding: 10px;
}
.brandbox>.col2{
    padding: 10px;
    position: relative;
}
.brandbox>.col2 img{
    display: block;
}
.brandbox>.col2>ul{
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #ddd;
}
.brandbox>.col2>ul>li:nth-child(n+2){
    display: none;
}
.brandbox a{
    display: block;
    position: absolute;
    width:55px;
    line-height: 14px;
    border:1px solid #ddd;
    color:#888;
    text-decoration: none;
    padding: 5px;
    top:10px;
    right:-120px;
}
.brandbox a:hover{
    color:red;
}
.brandbox a:hover::after{
    border-color:red;
}
.brandbox a::after{
    content: "";
    width: 8px;
    height:8px;
    border-bottom:1px solid #888;
    border-right:1px solid #888;
    transform: rotate(45deg);
    position: absolute;
    right:5px;
    transition: all 0.3s;
}
a.up::after{
    transform: rotate(-135deg);
    top:10px;
}